<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-08-20 13:57:03
 * @LastEditors: 商晓彬
 * @LastEditTime: 2022-02-16 16:30:36
-->

<div class="warehousing">
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>入库管理</span>
                </h3>
            </div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="p-formgroup-inline">
                    <span class="p-field">
                        <span class="input-lable">仓库名称：</span>
                        <p-dropdown filter="true" name="stroeName" [options]="stroeNameOptions" placeholder="请选择仓库名称"
                            [(ngModel)]="stroeName" emptyFilterMessage="暂无数据" (onChange)="onChange($event)">
                            <ng-template let-item pTemplate="selectedItem">
                                <span *ngIf="stroeName != undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                <span *ngIf="stroeName == undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 147px;"> </span>
                            </ng-template>
                            <ng-template let-model pTemplate="item">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">{{model.label}}
                                    </div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </span>
                    <span class="p-field" style="margin-left: 20px;">
                        <p-button *ngIf="'Pages.WarehousingManagement.CodeWarehousing' | permission" label="扫码入库" (onClick)="scan()"></p-button>
                    </span>
                    <span class="p-field" style="margin-left: 20px;">
                        <p-button *ngIf="'Pages.WarehousingManagement.WarehousingConformity' | permission" label="合格证入库" (onClick)="addCertificate()"></p-button>
                    </span>
                    <span class="p-field" style="margin-left: 20px;">
                        <p-button *ngIf="'Pages.WarehousingManagement.ReleaseReceipt' | permission" label="放行单入库" (onClick)="addRelease()"></p-button>
                    </span>
                    <span class="p-field" style="margin-left: 20px;">
                        <p-button *ngIf="'Pages.WarehousingManagement.ManualCertificate' | permission" label="合格证手动入库" (onClick)="manualAdd()"></p-button>
                    </span>
                    <span class="p-field" style="margin-left: 20px;">
                        <p-button *ngIf="'Pages.WarehousingManagement.BatchCertificate' | permission" label="合格证批量入库" (onClick)="batchAdd()"></p-button>
                    </span>
                    <span class="p-field" style="margin-left: 20px;">
                        <p-button *ngIf="'Pages.WarehousingManagement.TwoBatchCertificate' | permission" label="合格证批量导入" (onClick)="export()"></p-button>
                    </span>
                    <span class="p-field" style="margin-left: 20px;">
                        <p-button *ngIf="'Pages.WarehousingManagement.CancelWarehousing' | permission" label="取消入库" (onClick)="deleteWarehose()"></p-button>
                    </span>
                    <span class="p-field" style="margin-left: 20px;">
                        <p-button *ngIf="'Pages.WarehousingManagement.ConsumablesWarehousing' | permission" label="耗材入库" (onClick)="openUrl()"></p-button>
                    </span>
                    <span class="p-field" style="margin-left: 20px;">
                        <p-button *ngIf="'Pages.WarehousingManagement.BatchConfirmation' | permission" label="批量入库确认" (onClick)="confirmBatch()" class="ui-button-success"></p-button>
                    </span>
                </div>
                <div class="p-formgroup-inline" style="margin-top: 10px;">
                    <span class="p-field">
                        <span class="input-lable">仓库名称：</span>
                        <p-dropdown filter="true" name="sstroeName" [options]="stroeNameOptions" placeholder="请选择仓库名称"
                            [(ngModel)]="sstroeName" emptyFilterMessage="暂无数据">
                            <ng-template let-item pTemplate="selectedItem">
                                <span *ngIf="sstroeName != undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                <span *ngIf="sstroeName == undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 147px;"> </span>
                            </ng-template>
                            <ng-template let-model pTemplate="item">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">{{model.label}}
                                    </div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </span>
                    <span class="p-field ml">
                        <span class="input-lable">产品图号：</span>
                        <p-dropdown filter="true" name="productDrawingNo" [options]="productDrawingNoOptions"
                            placeholder="请选择产品图号" [(ngModel)]="productDrawingNo" emptyFilterMessage="暂无数据">
                            <ng-template let-item pTemplate="selectedItem">
                                <span *ngIf="productDrawingNo != undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                <span *ngIf="productDrawingNo == undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 147px;"> </span>
                            </ng-template>
                            <ng-template let-model pTemplate="item">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">{{model.label}}
                                    </div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </span>
                    <span class="p-field ml">
                        <span class="input-lable">合格证号：</span>
                        <p-dropdown filter="true" name="qualifiedNumber" [options]="qualifiedNumberOptions"
                            placeholder="请选择合格证号" [(ngModel)]="qualifiedNumber" emptyFilterMessage="暂无数据">
                            <ng-template let-item pTemplate="selectedItem">
                                <span *ngIf="qualifiedNumber != undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                <span *ngIf="qualifiedNumber == undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 147px;"> </span>
                            </ng-template>
                            <ng-template let-model pTemplate="item">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">{{model.label}}
                                    </div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </span>
                    <span class="p-field ml">
                        <span class="input-lable">任务编号：</span>
                        <p-dropdown filter="true" name="taskNumber" [options]="taskNumberOptions" placeholder="请选择任务编号"
                            [(ngModel)]="taskNumber" emptyFilterMessage="暂无数据">
                            <ng-template let-item pTemplate="selectedItem">
                                <span *ngIf="taskNumber != undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                <span *ngIf="taskNumber == undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 147px;"> </span>
                            </ng-template>
                            <ng-template let-model pTemplate="item">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">{{model.label}}
                                    </div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </span>
                    <span class="p-field ml">
                        <span class="input-lable">入库人：</span>
                        <p-dropdown filter="true" name="storePutPeople" [options]="storePutPeopleOptions"
                            placeholder="请选择入库人" [(ngModel)]="storePutPeople" emptyFilterMessage="暂无数据">
                            <ng-template let-item pTemplate="selectedItem">
                                <span *ngIf="storePutPeople != undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                <span *ngIf="storePutPeople == undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 147px;"> </span>
                            </ng-template>
                            <ng-template let-model pTemplate="item">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">{{model.label}}
                                    </div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </span>
                    <span class="p-field ml">
                        <span class="input-lable">储位：</span>
                        <p-dropdown filter="true" name="status" [options]="binLocationOptions" placeholder="请选择储位"
                            [(ngModel)]="status" emptyFilterMessage="暂无数据">
                            <ng-template let-item pTemplate="selectedItem">
                                <span *ngIf="status != undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                <span *ngIf="status == undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 147px;"> </span>
                            </ng-template>
                            <ng-template let-model pTemplate="item">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">{{model.label}}
                                    </div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </span>
                    <p-button label="查询" (onClick)="getTableList()" class="ml"></p-button>
                    <p-button label="重置" (onClick)="reset()" class="ml"></p-button>
                </div>
                <div class="row align-items-center" style="margin-top: 25px;">
                    <div class="primeng-datatable-container">
                        <p-table #dataTable [value]="primengTableHelper.records" (onLazyLoad)="getTableList($event)"
                            rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true"
                            [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
                            [resizableColumns]="primengTableHelper.resizableColumns" [(selection)]="deleteRow">
                            <ng-template pTemplate="header" selectionMode="multiple">
                                <tr>
                                    <th style="width: 50px; position:sticky;left:0;z-index:1;">选择</th>
                                    <th style="width: 150px;position:sticky;left:50px;z-index:1;">操作</th>
                                    <th style="width: 50px">序号</th>
                                    <th style="width: 150px">入库单号</th>
                                    <th style="width: 150px" pSortableColumn="storeStateContent">
                                        状态
                                        <p-sortIcon field="storeStateContent"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px">仓库名称</th>
                                    <th style="width: 120px">储位</th>
                                    <th style="width: 150px">合格证号</th>
                                    <th style="width: 150px">放行单号</th>
                                    <th style="width: 150px">产品图号</th>
                                    <th style="width: 120px">产品名称</th>
                                    <th style="width: 120px">规格</th>
                                    <th style="width: 150px">物料类别</th>
                                    <th style="width: 150px">物料细类</th>
                                    <th style="width: 150px">物料属性</th>
                                    <th style="width: 150px">质控卡号</th>
                                    <th style="width: 250px">适用型号(产品代号)</th>
                                    <th style="width: 250px">适用发次</th>
                                    <th style="width: 150px">批次</th>
                                    <th style="width: 150px">合格证任务号</th>
                                    <th style="width: 150px">装配任务号</th>
                                    <th style="width: 150px">数量</th>
                                    <th style="width: 550px;text-align: center;">产品编号(件号)</th>
                                    <th style="width: 150px">有效期止</th>
                                    <th style="width: 350px;text-align: center;">特殊记载</th>
                                    <th style="width: 150px">入库人</th>
                                    <th style="width: 150px">入库时间</th>
                                    <th style="width: 150px">仓库确认人</th>
                                    <th style="width: 150px">仓库确认时间</th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                                <tr>
                                    <td style="width: 50px; position:sticky;left:0;z-index:1;">
                                        <p-tableCheckbox [value]="record" [disabled]="record.storeStateContent == 1"></p-tableCheckbox>
                                    </td>
                                    <td style="width: 150px;position:sticky;left:50px;z-index:1;">
                                        <div class="btn-group dropdown" dropdown container="body">
                                            <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary">
                                                <i class="fa fa-cog"></i><span class="caret"></span> 操作
                                            </button>
                                            <ul class="dropdown-menu" *dropdownMenu>
                                                <li>
                                                    <a *ngIf="'Pages.WarehousingManagement.Resume' | permission" href="javascript:;" (click)="lookResume(record)">履历</a>
                                                </li>
                                                <li *ngIf="record.storeStateContent != 1">
                                                    <a *ngIf="'Pages.WarehousingManagement.Modify' | permission" href="javascript:;" (click)="update(record,'修改')">修改</a>
                                                </li>
                                                <li>
                                                    <a *ngIf="'Pages.WarehousingManagement.See' | permission" href="javascript:;" (click)="update(record,'查看')">查看</a>
                                                </li>
                                                <li *ngIf="record.storeStateContent != 1">
                                                    <a *ngIf="'Pages.WarehousingManagement.ReceiptConfirmation' | permission" href="javascript:;" (click)="confirm(record)">入库确认</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td style="width: 50px">{{rowIndex+1}}</td>
                                    <td style="width: 150px">{{record.storePutNo}}</td>
                                    <td style="width: 150px">{{record.storeStateContent == 1 ? '已入库' : '待入库' }}</td>
                                    <td style="width: 150px">{{record.stroeName}}</td>
                                    <td style="width: 120px">{{record.binLocation}}</td>
                                    <td style="width: 150px">{{record.qualifiedNumber}}</td>
                                    <td style="width: 150px">{{record.releaseOrder}}</td>
                                    <td style="width: 150px">{{record.productDrawingNo}}</td>
                                    <td style="width: 120px">{{record.productName}}</td>
                                    <td style="width: 120px">{{record.module}}</td>
                                    <td style="width: 150px">{{record.materialsNode}}</td>
                                    <td style="width: 150px">{{record.materialCategory}}</td>
                                    <td style="width: 150px">{{enum(record.materialsProperty)}}</td>
                                    <td style="width: 150px">{{record.qCCardNo}}</td>
                                    <td style="width: 250px">{{record.productCodeName}}</td>
                                    <td style="width: 250px">{{record.sendTimeName}}</td>
                                    <td style="width: 150px">{{record.batch}}</td>
                                    <td style="width: 150px">{{record.qualifiedTaskNumber}}</td>
                                    <td style="width: 150px">{{record.assemblyTaskNumber}}</td>
                                    <td style="width: 150px">{{record.quantity}}</td>
                                    <td style="width: 550px">{{record.productNumberShow}}</td>
                                    <td style="width: 150px">{{record.expirationDate | momentFormat:'YYYY-MM-DD '}}</td>
                                    <td style="width: 350px">{{record.specialRecords}}</td>
                                    <td style="width: 150px">{{record.storePutPeople}}</td>
                                    <td style="width: 150px">{{record.storePutTime | momentFormat:'YYYY-MM-DD
                                        HH:mm:ss'}}</td>
                                    <td style="width: 150px">{{record.identifyingPeople}}</td>
                                    <td style="width: 150px">{{record.identifyingTime | momentFormat:'YYYY-MM-DD
                                        HH:mm:ss'}}</td>
                                </tr>
                            </ng-template>
                        </p-table>
                        <div class="primeng-paging-container">
                            <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                (onPageChange)="getTableList($event)"
                                [totalRecords]="primengTableHelper.totalRecordsCount"
                                [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                            </p-paginator>
                            <span class="total-records-count">
                                {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 合格证新增 -->
    <app-add-certificate #AddCertificateComponent [warehouseData]="warehouseData" [title]="title"
        (modalSave)="getTableList()"> </app-add-certificate>
    <!-- 放行单入库 -->
    <app-add-release #AddReleaseComponent [warehouseData]="warehouseData" [title]="title" (modalSave)="getTableList()">
    </app-add-release>
    <!-- 合格证手动入库新增 -->
    <app-manual-add-certificate #ManualAddCertificateComponent [warehouseData]="warehouseData" [title]="title"
        (modalSave)="getTableList()"> </app-manual-add-certificate>
    <!-- 合格证批量入库 -->
    <app-batch-warehousing #BatchWarehousingComponent [warehouseData]="warehouseData" [title]="title"
        (modalSave)="getTableList()"> </app-batch-warehousing>
    <!-- 放行单修改 -->
    <app-update-release #UpdateReleaseComponent [editData]="rowdata" [title]="title" [typeStatus]="typeStatus"
        (modalSave)="getTableList()">
    </app-update-release>
    <!-- 合格证入库修改 -->
    <app-update-certificate #UpdateCertificateComponent [editData]="rowdata" [title]="title" [typeStatus]="typeStatus"
        (modalSave)="getTableList()"> </app-update-certificate>
    <!-- 合格证手动入库修改 -->
    <app-manual-update-certificate #ManualUpdateCertificateComponent [editData]="rowdata" [title]="title"
        [typeStatus]="typeStatus" (modalSave)="getTableList()"> </app-manual-update-certificate>
    <!-- 履历 -->
    <app-add-show-resume #AddShowResumeComponent [parentInfo]="rowdata"></app-add-show-resume>
    <!-- 确认入库 -->
    <p-dialog [header]="confirmTitle" [(visible)]="confirmFlag" modal="modal" [responsive]="true" (onHide)="onHide($event)">
        <form *ngIf="actived" #confirmForm="ngForm" novalidate autocomplete="off">
            <div class="modal-boday" style="height: 200px!important;">
                <div class="form-group" style="display: flex;justify-content: center;">
                    <label style="margin-right: 10px; margin-top: 5px;" for="label">仓库名称*：</label>
                    <p-dropdown required #storeSelect="ngModel" filter="true" name="storeId"
                        [options]="stroeNameOptions" placeholder="请选择仓库名称" [(ngModel)]="form.storeId"
                        emptyFilterMessage="暂无数据">
                        <ng-template let-item pTemplate="selectedItem">
                            <span style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                        </ng-template>
                        <ng-template let-model pTemplate="item">
                            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">{{model.label}}
                                </div>
                            </div>
                        </ng-template>
                    </p-dropdown>
                    <validation-messages [formCtrl]="storeSelect"></validation-messages>
                    <label style="margin-right: 20px; margin-top: 5px;margin-left: 20px;" for="label">储位*：</label>
                    <p-dropdown required #binLocationSelect="ngModel" filter="true" name="binLocation"
                        [options]="binLocationOptions" placeholder="请选择储位" [(ngModel)]="form.binLocationId"
                        emptyFilterMessage="暂无数据">
                        <ng-template let-item pTemplate="selectedItem">
                            <span style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                        </ng-template>
                        <ng-template let-model pTemplate="item">
                            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">
                                    {{model.label}}
                                </div>
                            </div>
                        </ng-template>
                    </p-dropdown>
                    <validation-messages [formCtrl]="binLocationSelect"></validation-messages>
                </div>
            </div>
            <div class="modal-footer" style="justify-content: center;">
                <p-button label="保存" [disabled]="!confirmForm.form.valid" (onClick)="toConfirm()"></p-button>
            </div>
        </form>
    </p-dialog>
    <!-- 合格证批量导入 -->
    <p-dialog header="导入文件" [(visible)]="display" modal="modal" [responsive]="true">
        <p>提示：导入前请先下载模板<a style="color:#41ABE9" (click)="down()">点击下载模板</a></p>
        <p-fileUpload *ngIf="display" name="file" customUpload="true" (uploadHandler)="myUploader($event)"
            accept='application/vnd.ms-excel' multiple="false" maxFileSize="1000000" chooseLabel="请选择上传文件"
            uploadLabel="上传" cancelLabel="取消">
            <ng-template pTemplate="content">
                <ul *ngIf="uploadedFiles.length">
                    <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
                </ul>
            </ng-template>
        </p-fileUpload>
        <p-footer>
            <button type="button" pButton icon="fa-close" (click)="display=false" label="取消"></button>
        </p-footer>
    </p-dialog>
    <!-- 扫码入库 -->
    <app-scan-coede #ScanCoedeComponent [warehouseData]="warehouseData" [title]="title" (modalSave)="getTableList()">
    </app-scan-coede>
</div>